<template>
  <div>
    <h3>森林病虫害防治系统</h3>
  <div class="block">
    <el-image :src="src"></el-image>
  </div>
    <el-form>
        用户名 <input type="text" v-model="userName"><br>
        密   码 <input type="text" v-model="userPwd"><br>
        <input type="button" value="登录" @click="login()"><br>
    </el-form>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data(){
    return{
      userName:"",
      userPwd:"",
      src: require('./img/1.jpg'),
    }
  },
  methods:{
    ...mapMutations(["setLoginer"]),
    async login(){
      let paramObj = {userName:this.userName,userPwd:this.userPwd}
      let info = await this.ajax.getSubmit("/api/user/login",paramObj)
      console.log(info)
      this.setLoginer(info)
      if(info!=""){
          // alert("登录成功！")
          this.$router.push("/index")
          // this.$store.dispatch("asyncUpdateName",{userName:this.userName})
      }else{
        alert("用户名或密码输入错误！")
      }
    }
  }

}
</script>

<style>
.el-form{
  width: 250px;
  margin: auto;
  margin-top: 20px;
  line-height: 60px;
}

.el-image{
  width: 500px;
}
h3{
  margin-top: -38px;
}
</style>